<template>
	<view class="nick-name">
		<view class="input-wrapper" :class="!!focus1 ? 'on' : ''">
			<input class="nick" type="text" @focus="focus1 = true" @blur="focus1 = false" :placeholder="i18n.setNickname"
			 placeholder-class="placeholder-class" v-model="username">
		</view>
		<view class="tips">{{i18n.checkNick}}</view>
		<view>
			<button class="btn-block" hover-class="btn-hover" @click="changeUserName">{{i18n.save}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				focus1: false,
				username: ''
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			 title: this.$t('nick.nickname')
			})
		},
		computed:{
			i18n() {
				return this.$t('nick');
			}
		},
		methods: {
			changeUserName() {
				if (!this.username) return this.$toast(this.$t('nick.setNickname'))
				this.$post('api/ucenter/setnickname', {
						nickname: this.username
					})
					.then(res => {
						this.$toast(this.$t('nick.modify'))
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.nick-name {
		padding-top: 20upx;
		padding: 0 30upx;

		.input-wrapper {
			height: 100upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--border);

			.nick {
				flex: 1;
			}

			&.on {
				border-color: var(--theme-color);
			}
		}

		.tips {
			color: var(--theme-color);
			line-height: 1;
			padding: 40upx 0;
			font-size: 28upx;
		}
	}
</style>
